<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U8下载器</title>    
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
    <div class="app-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="ri-cloud-line"></i>
                    <h2>M3U8下载器</h2>
                </div>
            </div>
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-header">
                        <i class="ri-download-line"></i>
                        <span>下载管理</span>
                    </div>
                    <ul class="nav-items">
                        <li class="nav-item active" data-page="all-tasks" data-title="下载管理">
                            <i class="ri-list-check"></i>
                            <span class="nav-link">所有任务</span>
                        </li>
                        <li class="nav-item" data-page="downloading" data-title="下载管理">
                            <i class="ri-arrow-down-circle-line"></i>
                            <span class="nav-link">正在下载</span>
                        </li>
                        <li class="nav-item" data-page="completed" data-title="下载管理">
                            <i class="ri-checkbox-circle-line"></i>
                            <span class="nav-link">已完成</span>
                        </li>
                        <li class="nav-item" data-page="stopped" data-title="下载管理">
                            <i class="ri-pause-circle-line"></i>
                            <span class="nav-link">已停止</span>
                        </li>
                    </ul>
                </div>
                <div class="nav-section">
                    <div class="nav-header">
                        <i class="ri-settings-line"></i>
                        <span>系统设置</span>
                    </div>
                    <ul class="nav-items">
                        <li class="nav-item" data-page="basic-settings" data-title="系统设置">
                            <i class="ri-equalizer-line"></i>
                            <span class="nav-link">基本设置</span>
                        </li>
                        <li class="nav-item" data-page="network-settings" data-title="系统设置">
                            <i class="ri-wifi-line"></i>
                            <span class="nav-link">网络设置</span>
                        </li>
                        <li class="nav-item" data-page="advanced-settings" data-title="系统设置">
                            <i class="ri-tools-line"></i>
                            <span class="nav-link">高级设置</span>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="sidebar-footer">
                <button id="theme-toggle" class="theme-toggle">
                    <i class="ri-sun-line theme-toggle-icon light"></i>
                    <i class="ri-moon-line theme-toggle-icon dark"></i>
                </button>
                <div class="version">v1.0.0</div>
            </div>
        </div>
        <div class="main-content">
            <div class="top-bar">
                <div class="top-bar-left">
                    <h1 id="page-title">下载管理</h1>
                </div>
                <div class="actions">
                    <button id="new-download-btn" class="primary-btn">
                        <i class="ri-add-line"></i>
                        <span>新建下载</span>
                    </button>
                </div>
            </div>
            
            <div id="all-tasks" class="content-section active">
                <div class="content-header">
                    <h2>所有下载任务</h2>
                    <div class="content-actions">
                        <div class="filter-sort-container">
                            <div class="filter-group">
                                <label for="status-filter">状态:</label>
                                <select id="status-filter" class="filter-select">
                                    <option value="all">全部</option>
                                    <option value="downloading">下载中</option>
                                    <option value="completed">已完成</option>
                                    <option value="stopped">已停止</option>
                                    <option value="error">错误</option>
                                </select>
                            </div>
                            <div class="filter-group">
                                <label for="keyword-filter">关键词:</label>
                                <input type="text" id="keyword-filter" class="filter-input" placeholder="输入关键词...">
                            </div>
                            <div class="sort-container">
                                <label for="sort-select">排序:</label>
                                <select id="sort-select" class="sort-select">
                                    <option value="name">按名称</option>
                                    <option value="status">按状态</option>
                                    <option value="progress">按进度</option>
                                    <option value="createdtime">按创建时间</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="download-list" class="download-list">
                    <!-- 下载项将在这里插入 -->
                </div>
            </div>
            
            <div id="downloading" class="content-section">
                <div class="content-header">
                    <h2>正在下载的任务</h2>
                </div>
                <div id="downloading-list" class="download-list">
                    <!-- 下载中的项目将在这里插入 -->
                </div>
            </div>
            
            <div id="completed" class="content-section">
                <div class="content-header">
                    <h2>已完成的任务</h2>
                </div>
                <div id="completed-list" class="download-list">
                    <!-- 已完成的项目将在这里插入 -->
                </div>
            </div>
            
            <div id="stopped" class="content-section">
                <div class="content-header">
                    <h2>已停止的任务</h2>
                </div>
                <div id="stopped-list" class="download-list">
                    <!-- 已停止的项目将在这里插入 -->
                </div>
            </div>
            
            <div id="basic-settings" class="content-section settings-section">
                <div class="content-header">
                    <h2>基本设置</h2>
                </div>
                <div class="settings-content">
                    <div class="settings-group">
                        <label for="default-save-directory">默认保存目录:</label>
                        <div class="directory-input">
                            <input type="text" id="default-save-directory" value="C:\Downloads">
                            <button id="browse-btn" class="secondary-btn">
                                <i class="ri-folder-line"></i>
                                <span>浏览</span>
                            </button>
                        </div>
                    </div>
                    <div class="settings-group">
                        <label for="max-concurrent-downloads">最大并发下载数:</label>
                        <input type="number" id="max-concurrent-downloads" value="3" min="1" max="10">
                    </div>
                    <div class="settings-group">
                        <label for="auto-start-downloads">自动开始下载:</label>
                        <label class="switch">
                            <input type="checkbox" id="auto-start-downloads" checked>
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="settings-actions">
                        <button id="save-basic-settings" class="primary-btn">
                            <i class="ri-save-line"></i>
                            <span>保存设置</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <div id="network-settings" class="content-section settings-section">
                <div class="content-header">
                    <h2>网络设置</h2>
                </div>
                <div class="settings-content">
                    <div class="settings-group">
                        <label for="proxy-enabled">使用代理:</label>
                        <label class="switch">
                            <input type="checkbox" id="proxy-enabled">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="settings-group proxy-settings">
                        <label for="proxy-url">代理URL:</label>
                        <input type="text" id="proxy-url" placeholder="http://proxy.example.com:8080">
                    </div>
                    <div class="settings-group">
                        <label for="connection-timeout">连接超时(秒):</label>
                        <input type="number" id="connection-timeout" value="30" min="5" max="120">
                    </div>
                    <div class="settings-group">
                        <label for="retry-count">重试次数:</label>
                        <input type="number" id="retry-count" value="3" min="0" max="10">
                    </div>
                    <div class="settings-actions">
                        <button id="save-network-settings" class="primary-btn">
                            <i class="ri-save-line"></i>
                            <span>保存设置</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <div id="advanced-settings" class="content-section settings-section">
                <div class="content-header">
                    <h2>高级设置</h2>
                </div>
                <div class="settings-content">
                    <div class="settings-group">
                        <label for="download-mode">下载模式:</label>
                        <select id="download-mode">
                            <option value="segmented">分段下载</option>
                            <option value="ffmpeg">FFmpeg</option>
                        </select>
                    </div>
                    <div class="settings-group">
                        <label for="default-format">默认格式:</label>
                        <select id="default-format">
                            <option value="mp4">MP4</option>
                            <option value="ts">TS</option>
                            <option value="mkv">MKV</option>
                        </select>
                    </div>
                    <div class="settings-group">
                        <label for="default-quality">默认质量:</label>
                        <select id="default-quality">
                            <option value="best">最佳</option>
                            <option value="high">高</option>
                            <option value="medium">中</option>
                            <option value="low">低</option>
                        </select>
                    </div>
                    <div class="settings-group">
                        <label for="custom-headers">自定义请求头:</label>
                        <textarea id="custom-headers" placeholder="Referer: https://example.com&#10;User-Agent: Mozilla/5.0..."></textarea>
                    </div>
                    <div class="settings-actions">
                        <button id="save-advanced-settings" class="primary-btn">
                            <i class="ri-save-line"></i>
                            <span>保存设置</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 新建下载对话框 -->
    <div id="new-download-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="ri-download-line"></i> 新建下载</h2>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="download-url">M3U8 URL:</label>
                    <textarea id="download-url" placeholder="输入M3U8 URL，每行一个" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="download-name">文件名:</label>
                    <input type="text" id="download-name" placeholder="可选，留空将使用默认名称">
                </div>
                <div class="form-group">
                    <label for="download-dir">保存目录:</label>
                    <div class="directory-input">
                        <input type="text" id="download-dir">
                        <button class="secondary-btn">
                            <i class="ri-folder-line"></i>
                            <span>浏览</span>
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="download-format">格式:</label>
                    <select id="download-format">
                        <option value="">使用默认格式</option>
                        <option value="mp4">MP4</option>
                        <option value="ts">TS</option>
                        <option value="mkv">MKV</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="download-quality">质量:</label>
                    <select id="download-quality">
                        <option value="">使用默认质量</option>
                        <option value="best">最佳</option>
                        <option value="high">高</option>
                        <option value="medium">中</option>
                        <option value="low">低</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="download-mode-select">下载模式:</label>
                    <select id="download-mode-select">
                        <option value="">使用默认模式</option>
                        <option value="segmented">分段下载</option>
                        <option value="ffmpeg">FFmpeg</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="use-proxy">
                        <span>使用代理</span>
                    </label>
                </div>
                <div class="form-group proxy-input" style="display: none;">
                    <label for="proxy-input">代理URL:</label>
                    <input type="text" id="proxy-input" placeholder="http://proxy.example.com:8080">
                </div>
                <div class="form-group">
                    <label for="custom-headers-input">自定义请求头:</label>
                    <textarea id="custom-headers-input" placeholder="Referer: https://example.com&#10;User-Agent: Mozilla/5.0..." rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button id="start-download-btn" class="primary-btn">
                    <i class="ri-download-line"></i>
                    <span>开始下载</span>
                </button>
                <button class="secondary-btn cancel-btn">
                    <i class="ri-close-line"></i>
                    <span>取消</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 下载详情侧边栏 -->
    <div id="download-detail-sidebar" class="detail-sidebar">
        <div class="detail-sidebar-header">
            <h2>下载详情</h2>
            <button class="close-detail-btn">
                <i class="ri-close-line"></i>
            </button>
        </div>
        <div class="detail-sidebar-content">
            <div class="detail-section">
                <h3>基本信息</h3>
                <div class="detail-item">
                    <span class="detail-label">名称:</span>
                    <span class="detail-value" id="detail-name">-</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">状态:</span>
                    <span class="detail-value status-badge" id="detail-status">-</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">URL:</span>
                    <div class="detail-value url-container">
                        <span id="detail-url" class="url-text">-</span>
                        <button class="copy-url-btn" title="复制URL">
                            <i class="ri-file-copy-line"></i>
                        </button>
                    </div>
                </div>
                <div class="detail-item">
                    <span class="detail-label">创建时间:</span>
                    <span class="detail-value" id="detail-created">-</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">更新时间:</span>
                    <span class="detail-value" id="detail-updated">-</span>
                </div>
            </div>

            <div class="detail-section">
                <h3>下载进度</h3>
                <div class="detail-progress">
                    <div class="detail-progress-bar">
                        <div class="detail-progress-inner" id="detail-progress-bar"></div>
                    </div>
                    <div class="detail-progress-text">
                        <span id="detail-progress-percent">0%</span>
                        <span id="detail-progress-segments">0/0 片段</span>
                    </div>
                </div>
                <div class="detail-stats">
                    <div class="detail-stat">
                        <i class="ri-dashboard-line"></i>
                        <span id="detail-speed">0 B/s</span>
                        <span class="detail-stat-label">速度</span>
                    </div>
                    <div class="detail-stat">
                        <i class="ri-hard-drive-line"></i>
                        <span id="detail-size">0 B</span>
                        <span class="detail-stat-label">大小</span>
                    </div>
                    <div class="detail-stat">
                        <i class="ri-time-line"></i>
                        <span id="detail-eta">--:--</span>
                        <span class="detail-stat-label">剩余时间</span>
                    </div>
                </div>
            </div>

            <div class="detail-section" id="speed-chart-section">
                <h3>下载速度图表</h3>
                <div class="speed-chart-container">
                    <canvas id="speed-chart" height="200"></canvas>
                </div>
            </div>

            <div class="detail-section">
                <h3>下载设置</h3>
                <div class="detail-item">
                    <span class="detail-label">保存目录:</span>
                    <span class="detail-value" id="detail-dir">-</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">格式:</span>
                    <span class="detail-value" id="detail-format">-</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">质量:</span>
                    <span class="detail-value" id="detail-quality">-</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">下载模式:</span>
                    <span class="detail-value" id="detail-mode">-</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">代理:</span>
                    <span class="detail-value" id="detail-proxy">-</span>
                </div>
            </div>

            <div class="detail-section" id="error-section" style="display: none;">
                <h3>错误信息</h3>
                <div class="detail-error-message" id="detail-error">
                    无错误信息
                </div>
            </div>
        </div>
        <div class="detail-sidebar-footer">
            <div class="detail-actions" id="detail-actions">
                <!-- 动态生成的操作按钮 -->
            </div>
        </div>
    </div>

    <!-- 通知系统 -->
    <div id="notification-container" class="notification-container"></div>

    <div class="detail-sidebar-overlay"></div>

    <script src="script.js"></script>
</body>
</html>
